<template>
	<div class="print">
		<div
			class="paper"
			v-for=" (item, index) in drawQr"
			:key="index"
		>
			<div :id="'qrcode'+index" class="qrcode"></div>
			<div style="printText">
				<div>条码：{{item.barcode}}</div>
				<div>名称：{{item.equipmentCode}}/{{item.equipmentName}}</div>
			</div>
		</div>
	</div>
</template>

<script>
import QRcode from "qrcodejs2"

export default {
    components: {
        // barcode: VueBarcode
    },
    props: {
        drawQr: {
            type: Array,
            default: []
        },
    },
    created() {
        // this.paginator(this.delInfo)
    },
    mounted() {},
    data() {
        return {}
    },
    methods: {
        qrcode() {
            this.drawQr.map((x, index) => {
                document.getElementById(`qrcode${index}`).innerHTML = '';
                let qrcode = new QRcode(`qrcode${index}`, {
                    width: 75,
                    height: 75,
                    text: `${x.barcode}`
                });
            });
        },
    },
    watch: {
        drawQr: {
            handler(newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.qrcode();
                    })
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@page {
	size:60mm 40mm !important;
   	margin:0;
}
.print {
	width:100%;
	height:100%;
	.paper{
		width:100%;
		height:100%;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size:10px;
		line-height: 16px;
		text-align: center;
		white-space: normal;
		word-break: break-all;
		.qrcode{
			margin-bottom:10px;
		}
	}
}
</style>
